<template>
  <div class="home-wrap">
    <h2>欢迎进入智慧课程平台</h2>

    <!-- 搜索用户收藏夹模块 -->
    <div class="search-section">
      <input
        type="text"
        v-model="searchUserId"
        placeholder="输入用户ID"
        class="search-input"
      />
      <button @click="searchUserFavorites" class="search-btn">搜索用户收藏夹</button>
    </div>

    <!-- 搜索结果 -->
    <div v-if="searchedUserFavorites" class="favorites-section">
      <h3 class="favorites-title">用户ID: {{ searchedUserId }} 的收藏夹</h3>
      <div class="folder">
        <h4 class="folder-title">{{ searchedUserFavorites.name }}</h4>
        <div class="files-container">
          <div
            class="file-item"
            v-for="(note, noteIndex) in searchedUserFavorites.notes"
            :key="noteIndex"
          >
            <h4 class="note-title">{{ note.title }}</h4>
            <p class="note-content">{{ note.content }}</p>
            <button @click="openFile(note)" class="open-file-btn">打开文件</button>
          </div>
          <div class="no-files" v-if="searchedUserFavorites.notes.length === 0">没有文件</div>
        </div>
      </div>
    </div>

    <!-- 当前用户的收藏夹模块 -->
    <div class="favorites-section">
      <h3 class="favorites-title">我的收藏夹</h3>
      <div class="folder">
        <h4 class="folder-title">收藏夹</h4>
        <div class="files-container">
          <div
            class="file-item"
            v-for="(note, noteIndex) in favoriteFolder.notes"
            :key="noteIndex"
          >
            <h4 class="note-title">{{ note.title }}</h4>
            <p class="note-content">{{ note.content }}</p>
            <button @click="openFile(note)" class="open-file-btn">打开文件</button>
            <button @click="removeNote(noteIndex)" class="remove-btn">移除</button>
          </div>
          <div class="no-files" v-if="favoriteFolder.notes.length === 0">没有文件</div>
        </div>
        <input
          type="file"
          @change="handleFileSelect($event)"
          class="file-input"
          accept=".txt,.doc,.pdf"
        />
        <button @click="addFile" class="add-file-btn">添加文件</button>
        <!-- 切换是否公开 -->
        <div class="toggle-public-section">
          <label for="isPublicCheckbox">公开收藏夹</label>
          <input type="checkbox" id="isPublicCheckbox" v-model="favoriteFolder.isPublic" />
        </div>
      </div>
    </div>

    <!-- 用户通知模块 -->
    <div class="notifications-section">
      <h3 class="notifications-title">用户通知</h3>
      <div class="notification" v-for="(notification, index) in notifications" :key="index">
        <p class="notification-message">{{ notification }}</p>
      </div>
      <div class="no-notifications" v-if="notifications.length === 0">没有新通知</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      searchUserId: '', // 存储搜索的用户ID
      searchedUserId: '', // 被搜索到的用户ID
      searchedUserFavorites: null, // 被搜索到的用户收藏夹
      favoriteFolder: { // 当前用户的收藏夹，增加是否公开属性
        name: '我的收藏夹',
        notes: [],
        isPublic: false // 默认不公开
      },
      selectedFile: null, // 存储用户选择的文件
      selectedFileName: '', // 存储文件名
      notifications: [ // 用户通知
        '您有一个新课程更新。',
        '请注意，您的作业截止日期已更改。',
        '系统维护将在本周末进行。'
      ]
    };
  },
  methods: {
    // 搜索用户收藏夹
    searchUserFavorites() {
      // 模拟后端搜索功能，这里直接使用 mock 数据
      const mockData = {
        123: {
          name: "用户123的收藏夹",
          notes: [
            { title: "文件A", content: "这是文件A的内容" },
            { title: "文件B", content: "这是文件B的内容" }
          ],
          isPublic: true // 公开
        },
        456: {
          name: "用户456的收藏夹",
          notes: [
            { title: "文件C", content: "这是文件C的内容" }
          ],
          isPublic: false // 不公开
        }
      };

      const userFavorites = mockData[this.searchUserId];

      // 只有用户收藏夹是公开的才能被显示
      if (userFavorites && userFavorites.isPublic) {
        this.searchedUserId = this.searchUserId;
        this.searchedUserFavorites = userFavorites;
      } else {
        alert("该用户的收藏夹不可见或不存在");
        this.searchedUserFavorites = null;
      }
    },
    // 处理文件选择
    handleFileSelect(event) {
      const file = event.target.files[0]; // 获取选中的文件
      if (file) {
        this.selectedFile = file; // 存储文件
        this.selectedFileName = file.name; // 存储文件名
      }
    },
    // 添加文件到收藏夹
    addFile() {
      if (this.selectedFile) {
        const fileTitle = this.selectedFileName; // 使用文件名作为标题
        const fileContent = "这是文件内容，文件名：" + this.selectedFileName; // 可以根据需求自定义内容

        // 创建一个 URL 对象，用于打开文件
        const fileUrl = URL.createObjectURL(this.selectedFile);

        this.favoriteFolder.notes.push({
          title: fileTitle,
          content: fileContent,
          url: fileUrl // 保存文件的 URL
        });

        // 重置文件选择
        this.selectedFile = null;
        this.selectedFileName = '';
        // 清空文件输入框
        this.$refs.fileInput.value = '';
      }
    },
    // 打开文件
    openFile(note) {
      window.open(note.url, '_blank'); // 在新窗口中打开文件
    },
    // 移除文件
    removeNote(noteIndex) {
      this.favoriteFolder.notes.splice(noteIndex, 1);
    }
  }
};
</script>

<style scoped>
.home-wrap {
  height: 100%;
  width: 100%;
}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.search-input {
  padding: 5px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-btn {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.favorites-section {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.favorites-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.folder {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.folder-title {
  font-size: 18px;
  color: #333;
}

.files-container {
  max-height: 200px; /* 限制文件区高度 */
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.file-item {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.note-title {
  font-size: 16px;
  color: #555;
  margin: 0;
}

.note-content {
  font-size: 14px;
  color: #777;
  margin: 5px 0;
}

.open-file-btn,
.remove-btn,
.add-file-btn {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 5px;
}

.open-file-btn:hover,
.remove-btn:hover,
.add-file-btn:hover {
  background-color: #d32f2f;
}

.no-files,
.no-notifications {
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

.file-input {
  margin-top: 10px;
}

.add-file-btn {
  margin-top: 5px;
  background-color: #4CAF50;
}

.add-file-btn:hover {
  background-color: #388E3C;
}

/* 是否公开切换 */
.toggle-public-section {
  margin-top: 10px;
}

.notifications-section {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.notifications-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.notification {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

.notification-message {
  font-size: 14px;
  color: #555;
}
</style>
